<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// (1)交换两个变量的值
			// 上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
			let x=1;
			let y=2;
			[y,x]=[x,y];
			console.log(x,y)//2 1
			
			// （2）从函数返回多个值
			//函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。
			// 有了解构赋值，取出这些值就非常方便。
			// 返回一个数组
			function example1(){
				const hello='hello';
				const world='world';
				return [hello,world]
			}
			let [h,w]=example1();
			console.log(h,w);//hello world
			
			// 返回一个对象
			function example2(){
				return {
					fo:'jelly',
					bar:'jack'
				}
			}
			let {fo,bar}=example2();
			console.log(fo,bar);//jelly jack
			
			// （3）函数参数的定义
			// 解构赋值可以方便地将一组参数与变量名对应起来。
			// 参数是一组有次序的值
			function f1([x,y,z]){
				console.log(x+y+z)//6
			}
			f1([1,2,3]);
			
			// 参数是一组无次序的值
			function f2({x,y,z}){
				console.log(x,y,z)//独孤求败 殇不患 凌雪鸦
			}
			f2({x:'独孤求败',y:'殇不患',z:'凌雪鸦'});
			
			// （4）提取json数据
			// 解构赋值对提取 JSON 对象中的数据，尤其有用。
			let jsonData = {
			  id: 42,
			  status: "OK",
			  data: [867, 5309]
			};
			let {id,status,data:res}=jsonData;
			console.log(id,status,res);//42 "OK" Array(2)
			
			// （5）函数参数的默认值
			// 指定参数的默认值，就避免了在函数体内部再写
			// var foo = config.foo || 'default foo'这样的语句。
			jQuery.ajax = function (url, {
			  async = true,
			  beforeSend = function () {},
			  cache = true,
			  complete = function () {},
			  crossDomain = false,
			  global = true,
			  // ... more config
			} = {}) {
			  // ... do stuff
			};
			
			// （6）遍历 Map 结构
			// 任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。
			// Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。
			let map=new Map();
			map.set('first','hello');
			map.set('second','world');
			for(let [key,value] of map){
				console.log(key+' '+value)
			}
			
			// （7）输入模块的指定方法
			// 加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
			//const { SourceMapConsumer, SourceNode } = require("source-map");
		</script>
	</body>
</html>
